<template>
  <div style="padding:10px">
    <h2 style="text-align:center">发布新课程</h2>
    <el-steps :active="active" finish-status="success" simple style="margin-bottom: 40px">
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="发布课程" />
    </el-steps>

    <!-- 填写课程基本信息 -->
    <info v-if="active === 0" />

    <!-- 创建课程大纲 -->
    <chapter v-if="active === 1" />

    <!-- 发布课程 -->
    <Publish v-if="active === 2 || active === 3" />

  </div>
</template>

<script>
/**
 * vue中引八子组件vue页面的步骤:
 *  1、引入子组件
 *  2、在当前页面的vue对象中注册引入的vue组件为子组件
 *  3、在页面中使用组件的名称就可以直接引入当做一个自定义标签使用
 *      将首字母小写就可以当做标签使用，如果子组件名称使用了多个单词，需要将后面的单词使用 - 连接首字母转为小写
 *
 *  当前页面引入了子组件，那么就是子组件的父组件:
 *  子组件:调用父组件的方法或者获取属性
 *    this.$parent可以获取到它的父组件vue对象父组件:获取子组件属性或调用方法
 *    this.$children代表当前父组件的所有的子组件集合[子组件无序]一般不用
 * vue:使用elementui的el-upload子组件
 *    给子组件定义ref值
 *      this.$refs.ref值·获取到父组件内使用的定义了ref值的子组件
 */
// 1.引入子组件
import Info from '@/views/course/components/Info'
import Chapter from '@/views/course/components/Chapter' // 默认引用index.vue
import Publish from '@/views/course/components/Publish'

export default {
  components: { Info, Chapter, Publish }, // 2.注册子组件
  data() {
    return {
      active: 0,
      courseId: null
    }
  }
}
</script>
